<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			canvas{
			background-image: url(img/星空.jpg)
			/*background-size: cover;*/
			}
		</style>
						
		</div>
			
		</div>
	</head>
	<body >s

		<canvas id ="myCanvas" width="1350" height="600"></canvas>

		<script type="text/javascript">

			var ch0 =[
			[0,0,1,1,1,1,0,0],
			[0,1,1,1,1,1,1,0],
			[1,1,1,0,0,1,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,1,0,0,1,1,1],
			[0,1,1,1,1,1,1,0],			
			[0,0,1,1,1,1,0,0],
	      ];
	      var ch1 =[
			[0,0,0,1,1,0,0,0],
			[0,0,1,1,1,1,0,0],
			[0,1,1,1,1,1,0,0],
			[0,0,0,1,1,1,0,0],
			[0,0,0,1,1,1,0,0],
			[0,0,0,1,1,1,0,0],
			[0,0,0,1,1,1,0,0],
			[0,0,0,1,1,1,0,0],
			[0,0,0,1,1,1,0,0],
			[0,0,0,1,1,1,0,0],
			[0,0,0,1,1,1,0,0],
			[1,1,1,1,1,1,1,1],			
			[1,1,1,1,1,1,1,1],
	      ];
	      var ch2 =[
			[0,0,1,1,1,1,0,0],
			[0,1,1,1,1,1,1,0],
			[1,1,0,0,0,0,1,1],
			[1,0,0,0,0,0,1,1],
			[0,0,0,0,0,0,1,1],
			[0,0,0,0,0,1,1,0],
			[0,0,0,0,1,1,0,0],
			[0,0,0,1,1,0,0,0],
			[0,0,1,1,0,0,0,0],
			[0,1,1,0,0,0,0,0],
			[1,1,1,0,0,0,0,1],
			[1,1,1,1,1,1,1,1],			
			[1,1,1,1,1,1,1,1],
	      ];
	      var ch3 =[
			[0,0,1,1,1,1,0,0],
			[0,1,1,1,1,1,1,0],
			[1,1,0,0,0,0,1,1],
			[0,0,0,0,0,0,1,1],
			[0,0,0,0,0,1,1,1],
			[0,0,0,0,1,1,1,0],
			[0,1,1,1,1,1,0,0],
			[0,1,1,1,1,1,1,0],
			[0,0,0,0,0,1,1,1],
			[0,0,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],			
			[0,1,1,1,1,1,1,0],
			[0,0,1,1,1,1,0,0],
	      ];
	      var ch4 =[
			[0,1,0,0,0,0,1,0],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,1,1,1,1,1,1],
			[1,1,1,1,1,1,1,1],
			[0,0,0,0,0,0,1,1],
			[0,0,0,0,0,0,1,1],
			[0,0,0,0,0,0,1,1],
			[0,0,0,0,0,0,1,1],			
			[0,0,0,0,0,0,1,1],
			[0,0,0,0,0,0,1,1],
	      ];
	      var ch5 =[
			[1,1,1,1,1,1,1,1],
			[1,1,1,1,1,1,1,1],
			[1,1,0,0,0,0,0,0],
			[1,1,0,0,0,0,0,0],
			[1,1,0,0,0,0,0,0],
			[1,1,1,1,1,1,1,0],
			[1,1,1,1,1,1,1,1],
			[1,1,0,0,0,1,1,1],
			[0,0,0,0,0,0,1,1],
			[1,0,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],			
			[0,1,1,1,1,1,1,0],
			[0,0,1,1,1,1,0,0],
	      ];
	      var ch6 =[
			[0,0,1,1,1,1,1,0],
			[0,1,1,1,1,1,1,1],
			[1,1,1,0,0,0,1,1],
			[1,1,0,0,0,0,0,0],
			[1,1,0,0,0,0,0,0],
			[1,1,1,1,1,1,1,0],
			[1,1,1,1,1,1,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,1,0,0,1,1,1],
			[0,1,1,1,1,1,1,0],			
			[0,0,1,1,1,1,0,0],
	      ];
	      
	      var ch7 =[
	        [1,1,1,1,1,1,1,1],
	        [1,1,1,1,1,1,1,1],
	        [1,1,0,0,0,0,1,1],
	        [1,0,0,0,0,0,1,1],
	        [0,0,0,0,0,0,1,1],
	        [0,0,0,0,0,1,1,0],
	        [0,0,0,0,0,1,1,0],
	        [0,0,0,0,1,1,0,0],
	        [0,0,0,0,1,1,0,0],
	        [0,0,0,1,1,0,0,0],
	        [0,0,0,1,1,0,0,0],
	        [0,0,1,1,0,0,0,0],
	        [0,0,1,1,0,0,0,0],
	        
	       
	      ];
	      var ch8 =[
	        [0,0,1,1,1,1,0,0],
			[0,1,1,1,1,1,1,0],
			[1,1,1,0,0,1,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,1,0,0,1,1,1],
			[0,1,1,1,1,1,1,0],
			[0,1,1,1,1,1,1,0],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,1,0,0,1,1,1],
			[0,1,1,1,1,1,1,0],			
			[0,0,1,1,1,1,0,0],
	      ];
	      var ch9=[
	        [0,0,1,1,1,1,0,0],
			[0,1,1,1,1,1,1,0],
			[1,1,1,0,0,1,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,1,0,0,1,1,1],
			[1,1,1,1,1,1,1,1],
			[0,0,1,1,1,1,1,1],
			[0,0,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,1,0,0,1,1,1],
			[0,1,1,1,1,1,1,0],			
			[0,0,1,1,1,1,0,0],
	      ];
	      
	     var canvas = document.getElementById("myCanvas");
			var ctx = canvas.getContext("2d");
			
			for(var i = 0; i < ch0.length; i++) {
				for(var j = 0; j < ch0[i].length; j++) {
					if(ch0[i][j] == 1) {
						ctx.beginPath();
						ctx.fillStyle ="red";
						ctx.rect(j * 15 + 220, i * 15 + 20, 10, 10);
						ctx.fill();
					}


					if(ch1[i][j] == 1) {
						ctx.beginPath();
						ctx.fillStyle = "orange";
						ctx.rect(j * 15 + 420, i * 15 + 20, 10, 10);
						ctx.fill();
					}
					
					
					if(ch2[i][j] == 1) {
						ctx.beginPath();
						ctx.fillStyle = "yellow";
						ctx.rect(j * 15 + 620, i * 15 + 20, 10, 10);
						ctx.fill();
					}
					
					
					if(ch3[i][j] == 1) {
						ctx.beginPath();
						ctx.fillStyle = "green";
						ctx.rect(j * 15 + 820, i * 15 + 20, 10, 10);
						ctx.fill();
					}
					
					
					if(ch4[i][j] == 1) {
						ctx.beginPath();
						ctx.fillStyle = "blue";
						ctx.rect(j * 15 + 1020, i * 15 + 20, 10, 10);
						ctx.fill();
					}
					
					
					if(ch5[i][j] == 1) {
						ctx.beginPath();
						ctx.fillStyle = "chartreuse";
						ctx.rect(j * 15 + 220, i * 15 + 320, 10, 10);
						ctx.fill();
					}
					
					
					if(ch6[i][j] == 1) {
						ctx.beginPath();
						ctx.fillStyle = "plum";
						ctx.rect(j * 15 +420, i * 15 + 320, 10,  10);
						ctx.fill();
					}
					
										
					if(ch7[i][j] == 1) {
						ctx.beginPath();
						ctx.fillStyle = "peru";
						ctx.rect(j * 15 + 620, i * 15 + 320, 10, 10);
						ctx.fill();
					}
					
					
					if(ch8[i][j] == 1) {
						ctx.beginPath();
						ctx.fillStyle = "mediumspringgreen";
						ctx.rect(j * 15 + 820, i * 15 + 320, 10,10);
						ctx.fill();
					}
					
					
					if(ch9[i][j] == 1) {
						ctx.beginPath();
						ctx.fillStyle = "salmon";
						ctx.rect(j * 15 + 1020, i * 15 + 320, 10, 10);
						ctx.fill();
					}
				}
			}
				
		</script>
		
	</body>
</html>
